<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.itwill.ecom.product.ProductBeans"%>
<%@page import="com.itwill.ecom.product.ProductServiceImpl"%>
<%@page import="com.itwill.ecom.product.ProductService"%>
<%@page
	import="org.springframework.web.context.support.WebApplicationContextUtils"%>
<%@page import="org.springframework.web.context.WebApplicationContext"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
WebApplicationContext webContext1 = WebApplicationContextUtils
		.getWebApplicationContext(application);
ProductService productService = (ProductService) webContext1
		.getBean("productService");

int productNo = Integer.parseInt(request.getParameter("productno"));
ProductBeans detail = productService.getProductByNo(productNo);
%>

<!-- header -->
<jsp:include page="../include/header.jsp"></jsp:include>
<header id="header">
	<!--header-->
<!--/header-middle-->
<jsp:include page="../include/header_middle.jsp"></jsp:include>
<!--header-bottom-->
<jsp:include page="../include/header_bottom.jsp"></jsp:include>
<!--/header-bottom-->

<script type="text/javascript">
	$(function(){
		var issame = '';
		if (location.search) {
			issame = location.search.split('&')[1];
			issame = issame.split('=')[1];
			if (issame == 1){
				alert("장바구니에 이미 들어있습니다.");
			}
			else if (issame == 2){
				alert("장바구니에 추가되었습니다.");
			}
		}		
	});
</script>


</header>


<!-- Le styles  -->
<link
	href="${pageContext.request.contextPath}/resources/assets/css/bootstrap.css"
	rel="stylesheet" />
<link
	href="${pageContext.request.contextPath}/resources/assets/css/bootstrap-responsive.css"
	rel="stylesheet" />
<link
	href="${pageContext.request.contextPath}/resources/assets/css/docs.css"
	rel="stylesheet" />

<link href="style.css" rel="stylesheet" />
<link
	href="${pageContext.request.contextPath}/resources/assets/js/google-code-prettify/prettify.css"
rel="stylesheet" />


<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144"
	href="${pageContext.request.contextPath}/resources/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114"
	href="${pageContext.request.contextPath}/resources/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72"
	href="${pageContext.request.contextPath}/resources/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed"
	href="${pageContext.request.contextPath}/resources/assets/ico/apple-touch-icon-57-precomposed.png">


<!--/header-->




<section>
	<div class="container">
		<div class="row">
			<div class="col-sm-3">
				<jsp:include page="../include/left_sidebar.jsp"></jsp:include>
</div>

<div class="col-sm-9 padding-right">
	<!--------------------------------------여기다가 각자 삽입------------------------------------>

	<div id="product_info"></div>

	<div class="row">
		<div class="span9">
			<ul class="breadcrumb">
				<li><a href="${pageContext.request.contextPath}/">Home</a> <span
					class="divider">/</span></li>
				<li><a href="products">제품</a> <span class="divider">/</span></li>
				<li class="active">제품상세</li>
			</ul>
			<div class="row">
				<div id="gallery" class="span3">
					<style>
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}

#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}

#jquery-lightbox a img {
	border: none;
}

#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}

#lightbox-container-image {
	padding: 10px;
}

#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}

#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}

#lightbox-container-image-box>#lightbox-nav {
	left: 0;
}

#lightbox-nav a {
	outline: none;
}

#lightbox-nav-btnPrev,#lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}

#lightbox-nav-btnPrev {
	left: 0;
	float: left;
}

#lightbox-nav-btnNext {
	right: 0;
	float: right;
}

#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}

#lightbox-container-image-data {
	padding: 0 10px;
	color: #666;
}

#lightbox-container-image-data #lightbox-image-details {
	width: 70%;
	float: left;
	text-align: left;
}

#lightbox-image-details-caption {
	font-weight: bold;
}

#lightbox-image-details-currentNumber {
	display: block;
	clear: left;
	padding-bottom: 1.0em;
}

#lightbox-secNav-btnClose {
	width: 66px;
	float: right;
	padding-bottom: 0.7em;
}
</style>
		<a
			href="${pageContext.request.contextPath}/resources/images/product/<%= detail.getProduct_image0() %>"
title="<h4>Fujifilm FinePix S2950 Digital Camera</h4>"> <img
src="${pageContext.request.contextPath}/resources/images/product/<%= detail.getProduct_image0() %>"
	width="100%" alt="Fujifilm FinePix S2950 Digital Camera" />
</a>
<div id="myCarousel" class="moreOptopm carousel slide">
	<div class="carousel-inner">
		<div class="item active">
			<a
				href="${pageContext.request.contextPath}/resources/images/product/<%= detail.getProduct_image1() %>">
			<img width="29%"
			src="${pageContext.request.contextPath}/resources/images/product/<%= detail.getProduct_image1() %>"
			alt="" />
		</a> <a
			href="${pageContext.request.contextPath}/resources/images/product/<%= detail.getProduct_image2() %>">
			<img width="29%"
			src="${pageContext.request.contextPath}/resources/images/product/<%= detail.getProduct_image2() %>"
			alt="" />
		</a> <a
			href="${pageContext.request.contextPath}/resources/images/product/<%= detail.getProduct_image3() %>">
			<img width="29%"
			src="${pageContext.request.contextPath}/resources/images/product/<%= detail.getProduct_image3() %>"
			alt="" />
		</a>
	</div>
	<div class="item">
		<a
			href="${pageContext.request.contextPath}/resources/assets/products/large/<%= detail.getProduct_image1() %>">
			<img width="29%"
			src="${pageContext.request.contextPath}/resources/assets/products/large/<%= detail.getProduct_image1() %>"
			alt="" />
		</a> <a
			href="${pageContext.request.contextPath}/resources/assets/products/large/<%= detail.getProduct_image2() %>">
			<img width="29%"
			src="${pageContext.request.contextPath}/resources/assets/products/large/<%= detail.getProduct_image2() %>"
			alt="" />
		</a> <a
			href="${pageContext.request.contextPath}/resources/assets/products/large/<%= detail.getProduct_image3() %>">
			<img width="29%"
			src="${pageContext.request.contextPath}/resources/assets/products/large/<%= detail.getProduct_image4() %>"
			alt="" />
		</a>
	</div>
</div>
<!--   
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
         <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> 
 -->
	</div>

	<div class="btn-toolbar">
		<div class="btn-group">
			<span class="btn"><i class="icon-envelope"></i></span> <span
				class="btn"><i class="icon-print"></i></span> <span
				class="btn"><i class="icon-zoom-in"></i></span> <span
				class="btn"><i class="icon-star"></i></span> <span
				class="btn"><i class=" icon-thumbs-up"></i></span> <span
				class="btn"><i class="icon-thumbs-down"></i></span>
		</div>
	</div>
</div>
<div class="span6">
	<h3><%=detail.getProduct_name()%>
</h3>
<small>CPU: i3 RAM : 8GB Graphic Card : 보드내장형</small>
<hr class="soft" />
<form class="form-horizontal qtyFrm">
	<div class="control-group">
		<label class="control-label"><span><fmt:formatNumber value="<%= detail.getProduct_price() %>" pattern=",###"/>원</span></label>
	<div class="controls">
		<!-- <input type="number" class="span1" placeholder="Qty."/> -->

		
				<i style="margin-left:280px" class=" icon-shopping-cart"></i>&nbsp;<a href="javascript:product_send()">장바구니담기</a>
				<i style="margin-left:280px" class=" icon-shopping-cart"></i>&nbsp;<a href="../cart/cartform">장바구니이동</a>

		</div>
	</div>
</form>

<hr class="soft" />
<h4>재고 100</h4>
<form name = "f" method="post" class="form-horizontal qtyFrm pull-right">

	<!-- 세션 id 히든에 담아서 값보내기 -->
	<input type="hidden" name = "sid_id" value="<%=session.getAttribute("sid")%>">
	<input type="hidden" name = "product_no" value="<%=productNo%>">

	<div class="control-group">
		<label class="control-label"><span>수량</span></label>
		<div class="controls">
			<select name="count" class="span2">
				<% for(int i=1; i<5; i++){%>
					<option value="<%=i%>"><%=i%></option>
				<%} %>	
			</select>
		</div>
	</div>
	<!-- <div class="control-group">
<label class="control-label"><span></span></label>
<div class="controls">
  <select class="span2">
	  <option></option>
	  <option>Cotton</option>
	  <option>Mix</option>
	  <option>Ruby</option>
	</select>
</div>
 </div> -->
</form>
<hr class="soft clr" />
<p>
	<%=detail.getProduct_detail()%>

	</p>
	<a class="btn btn-small pull-right" href="#detail">More
		Details</a> <br class="clr" /> <a name="detail"></a>
	<hr class="soft" />
</div>

<div class="span9">
	<ul id="productDetail" class="nav nav-tabs">
		<li class="active"><a href="#home" data-toggle="tab">제품
				상세정보</a></li>
		<li><a href="#profile" data-toggle="tab">관련 상품</a></li>
	</ul>
	<div id="myTabContent" class="tab-content">
		<div class="tab-pane fade active in" id="home">
			<h4>제품 정보</h4>
			<table class="table table-bordered" cellspacing="0">
				<tbody>
					<tr class="techSpecRow">
						<th colspan="2">제품 상세정보</th>
					</tr>
					<tr class="techSpecRow">
						<td class="techSpecTD1">CPU:</td>
						<td class="techSpecTD2">인텔 펜티엄 G3220 (정품)</td>
					</tr>
					<tr class="techSpecRow">
						<td class="techSpecTD1">RAM:</td>
						<td class="techSpecTD2">실리콘파워 DDR3 4G PC3-12800</td>
					</tr>
					<tr class="techSpecRow">
						<td class="techSpecTD1">Graphic Card :</td>
						<td class="techSpecTD2">메인보드 내장 기본 VGA 사용 (추가선택가능)</td>
					</tr>
					<tr class="techSpecRow">
						<td class="techSpecTD1">MainBoard:</td>
						<td class="techSpecTD2">ASRock H81M-HDS 에즈윈</td>
					</tr>
					<tr class="techSpecRow">
						<td class="techSpecTD1">Power:</td>
						<td class="techSpecTD2">500W</td>
					</tr>
				</tbody>
			</table>

			<h5>특징</h5>
			<p>Intel® Pentium® Processor Exceptional value with
				reliable performance The Intel® Pentium® processor is perfect
				for all your everyday tasks-from streaming HD movies and
				videos to editing music and photos. Great performance: Choose
				the Intel Pentium processor for excellent performance that
				won't slow you down. From high-quality gaming to streaming HD
				videos and movies, the Pentium can do everything you need.</p>

			<h4>리뷰</h4>
			<h5>Manufacturer's Description</h5>
			<p>Intel® Pentium® Processor Exceptional value with
				reliable performance The Intel® Pentium® processor is perfect
				for all your everyday tasks-from streaming HD movies and
				videos to editing music and photos. Great performance: Choose
				the Intel Pentium processor for excellent performance that
				won't slow you down. From high-quality gaming to streaming HD
				videos and movies, the Pentium can do everything you need.</p>

			<h5>강력한 퍼포먼스를 자랑하는 인텔펜티엄 하스웰 3220 CPU</h5>
			<p>Intel® Pentium® Processor Exceptional value with
				reliable performance The Intel® Pentium® processor is perfect
				for all your everyday tasks-from streaming HD movies and
				videos to editing music and photos. Great performance: Choose
				the Intel Pentium processor for excellent performance that
				won't slow you down. From high-quality gaming to streaming HD
				videos and movies, the Pentium can do everything you need.</p>
			<h5>주안점</h5>
			<p>Intel® Pentium® Processor Exceptional value with
				reliable performance The Intel® Pentium® processor is perfect
				for all your everyday tasks-from streaming HD movies and
				videos to editing music and photos. Great performance: Choose
				the Intel Pentium processor for excellent performance that
				won't slow you down. From high-quality gaming to streaming HD
				videos and movies, the Pentium can do everything you need.</p>

			<h5>Sharp, clear shots</h5>
			<p>Intel® Pentium® Processor Exceptional value with
				reliable performance The Intel® Pentium® processor is perfect
				for all your everyday tasks-from streaming HD movies and
				videos to editing music and photos. Great performance: Choose
				the Intel Pentium processor for excellent performance that
				won't slow you down. From high-quality gaming to streaming HD
				videos and movies, the Pentium can do everything you need.</p>
		</div>
		<div class="tab-pane fade" id="profile">
			<br class="clr" />
			<hr class="soft" />
			<div class="tab-content">
				<div class="tab-pane" id="listView">
					<div class="row">
						<div id="productView" class="span2">
							<img
								src="${pageContext.request.contextPath}/resources/assets/products/4.jpg"
						alt="" />
				</div>
				<div class="span4">
					<h3>New | Available</h3>
					<hr class="soft" />
					<h5>제품 이름</h5>
					<p>Nowadays the lingerie industry is one of the most
						successful business spheres.We always stay in touch with
						the latest fashion tendencies - that is why our goods are
						so popular..</p>
					<a class="btn btn-small pull-right"
						href="product_details.html">View Details</a> <br
						class="clr" />
				</div>
				<div class="span3 alignR">
					<form class="form-horizontal qtyFrm">
						<h3>$222.00</h3>
						<label class="checkbox"> <input type="checkbox">
							비교하기
						</label><br />
						<div class="btn-group">
							<a href="product_details.html" class="btn btn-large"><i
								class=" icon-shopping-cart"></i> 장바구니</a> <a
								href="product_details.html" class="btn btn-large">보기</a>
						</div>
					</form>
				</div>
			</div>
			<hr class="soft" />
			<div class="row">
				<div id="productView" class="span2">
					<img
						src="${pageContext.request.contextPath}/resources/assets/products/4.jpg"
						alt="" />
				</div>
				<div class="span4">
					<h3>New | Available</h3>
					<hr class="soft" />
					<h5>제품이름</h5>
					<p>Nowadays the lingerie industry is one of the most
						successful business spheres.We always stay in touch with
						the latest fashion tendencies - that is why our goods are
						so popular..</p>
					<a class="btn btn-small pull-right"
						href="product_details.html">View Details</a> <br
						class="clr" />
				</div>
				<div class="span3 alignR">
					<form class="form-horizontal qtyFrm">
						<h3>$222.00</h3>
						<label class="checkbox"> <input type="checkbox">
							비교하기
						</label><br />
						<div class="btn-group">
							<a href="product_details.html" class="btn btn-large"><i
								class=" icon-shopping-cart"></i> 장바구니</a> <a
								href="product_details.html" class="btn btn-large">보기</a>
						</div>
					</form>
				</div>
			</div>
			<hr class="soft" />
			<div class="row">
				<div id="productView" class="span2">
					<img
						src="${pageContext.request.contextPath}/resources/assets/products/4.jpg"
						alt="" />
				</div>
				<div class="span4">
					<h3>New | Available</h3>
					<hr class="soft" />
					<h5>제품이름</h5>
					<p>Nowadays the lingerie industry is one of the most
						successful business spheres.We always stay in touch with
						the latest fashion tendencies - that is why our goods are
						so popular..</p>
					<a class="btn btn-small pull-right"
						href="product_details.html">상세보기</a> <br class="clr" />
				</div>
				<div class="span3 alignR">
					<form class="form-horizontal qtyFrm">
						<h3>$222.00</h3>
						<label class="checkbox"> <input type="checkbox">
							비교하기
						</label><br />
						<div class="btn-group">
							<a href="product_details.html" class="btn btn-large"><i
								class=" icon-shopping-cart"></i> 장바구니</a> <a
								href="product_details.html" class="btn btn-large">보기</a>
						</div>
					</form>
				</div>
			</div>
			<hr class="soft" />
			<div class="row">
				<div id="productView" class="span2">
					<img
						src="${pageContext.request.contextPath}/resources/assets/products/4.jpg"
						alt="" />
				</div>
				<div class="span4">
					<h3>New | Available</h3>
					<hr class="soft" />
					<h5>Product Name</h5>
					<p>Nowadays the lingerie industry is one of the most
						successful business spheres.We always stay in touch with
						the latest fashion tendencies - that is why our goods are
						so popular..</p>
					<a class="btn btn-small pull-right"
						href="product_details.html">상세보기</a> <br class="clr" />
				</div>
				<div class="span3 alignR">
					<form class="form-horizontal qtyFrm">
						<h3>$222.00</h3>
						<label class="checkbox"> <input type="checkbox">
							비교하기
						</label><br />
						<div class="btn-group">
							<a href="product_details.html" class="btn btn-large"><i
								class="icon-shopping-cart"></i> 장바구니</a> <a
								href="product_details.html" class="btn btn-large">보기</a>
						</div>
					</form>
				</div>
			</div>

			<hr class="soft" />
			<div class="row">
				<div id="productView" class="span2">
					<img
						src="${pageContext.request.contextPath}/resources/assets/products/4.jpg"
						alt="" />
				</div>
				<div class="span4">
					<h3>New | Available</h3>
					<hr class="soft" />
					<h5>Product Name</h5>
					<p>Nowadays the lingerie industry is one of the most
						successful business spheres.We always stay in touch with
						the latest fashion tendencies - that is why our goods are
						so popular..</p>
					<a class="btn btn-small pull-right"
						href="product_details.html">View Details</a> <br
						class="clr" />
				</div>
				<div class="span3 alignR">
					<form class="form-horizontal qtyFrm">
						<h3>$222.00</h3>
						<label class="checkbox"> <input type="checkbox">
							비교하기
						</label><br />
						<div class="btn-group">
							<a href="product_details.html" class="btn btn-large"><i
								class=" icon-shopping-cart"></i> 장바구니</a> <a
								href="product_details.html" class="btn btn-large">보기</a>
						</div>
					</form>
				</div>
			</div>
			<hr class="soft" />
			<div class="row">
				<div id="productView" class="span2">
					<img
						src="${pageContext.request.contextPath}/resources/assets/products/4.jpg"
						alt="" />
				</div>
				<div class="span4">
					<h3>New | Available</h3>
					<hr class="soft" />
					<h5>Product Name</h5>
					<p>Nowadays the lingerie industry is one of the most
						successful business spheres.We always stay in touch with
						the latest fashion tendencies - that is why our goods are
						so popular..</p>
					<a class="btn btn-small pull-right"
						href="product_details.html">View Details</a> <br
						class="clr" />
				</div>
				<div class="span3 alignR">
					<form class="form-horizontal qtyFrm">
						<h3>$222.00</h3>
						
						<div class="btn-group">
							<a href="productDetail?productno=<%=detail.getProduct_no()%>" class="btn btn-large"><i
								class=" icon-shopping-cart"></i> 장바구니</a> <a
								href="productDetail?productno=<%=detail.getProduct_no()%>" class="btn btn-large">보기</a>
						</div>
					</form>
				</div>
			</div>
			<hr class="soft" />
		</div>
		<div class="tab-pane active" id="blockView">
			<ul class="thumbnails">
				<%
				List<ProductBeans> list=productService.getProductAll();
				for(ProductBeans beans : list){	
					if(detail.getProduct_company()==beans.getProduct_company()
							&& detail.getProduct_category()==beans.getProduct_category()){
				%>
				<li class="span3">
					<div class="thumbnail">
						<a href="productDetail?productno=<%=beans.getProduct_no()%>"><img
							src="${pageContext.request.contextPath}/resources/images/product/<%= beans.getProduct_image0() %>"
							alt="" /></a>
						<div class="caption">
							<h5>Manicure &amp; Pedicure</h5>
							<p>Lorem Ipsum is simply dummy text.</p>
							<h4>
								<a class="btn btn-large" href="productDetail?productno=<%=beans.getProduct_no()%>">보기</a>
								<span class="pull-right"><fmt:formatNumber value="<%= beans.getProduct_price() %>" pattern=",###"/>원</span>
							</h4>
						</div>
					</div>
				</li>
				<%
					}
				}%>
			</ul>
		<hr class="soft" />
		</div>
	</div>
	<br class="clr">
	</div>
</div>
			</div>

		</div>
	</div>
</div>
	<!--------------------------------------   삽입 끝       ------------------------------------>
			</div>
		</div>
	</div>
</section>


<script type="text/javascript"
	src="http://platform.twitter.com/widgets.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/assets/js/jquery.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/assets/js/google-code-prettify/prettify.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/assets/js/application.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-transition.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-modal.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-scrollspy.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-alert.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-dropdown.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-tab.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-tooltip.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-popover.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-button.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-collapse.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-carousel.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-typeahead.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/assets/js/bootstrap-affix.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/assets/js/jquery.lightbox-0.5.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/assets/js/bootsshoptgl.js"></script>
<script type="text/javascript">
$(function() {
	$('#gallery a').lightBox();
});

function product_send(){
	f.action = 'productdetailaction';
	f.submit();
}

</script>

<!--Footer-->
<jsp:include page="../include/footer.jsp"></jsp:include>
<!--/Footer-->

